<template>
  <div class="universal-payment">
    <el-card class="payment-card">
      <!-- 订单信息 -->
      <div class="order-info-section">
        <h3>订单信息</h3>
        <div class="info-item">
          <span class="label">订单编号：</span>
          <span class="value">{{ orderInfo.orderNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">商品名称：</span>
          <span class="value">{{ orderInfo.itemTitle }}</span>
        </div>
        <div class="info-item">
          <span class="label">订单金额：</span>
          <span class="value amount">¥{{ orderInfo.amount?.toFixed(2) }}</span>
        </div>
        <div v-if="orderInfo.discountAmount > 0" class="info-item">
          <span class="label">优惠金额：</span>
          <span class="value discount">-¥{{ orderInfo.discountAmount?.toFixed(2) }}</span>
        </div>
        <div class="info-item">
          <span class="label">实付金额：</span>
          <span class="value actual-amount">¥{{ orderInfo.amount?.toFixed(2) }}</span>
        </div>
        <div class="info-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ formatDate(orderInfo.createdAt) }}</span>
        </div>
        <div v-if="remainingTime > 0" class="info-item">
          <span class="label">支付倒计时：</span>
          <span class="value countdown" :class="{ 'time-warning': remainingTime < 300 }">
            {{ formatTime(remainingTime) }}
          </span>
        </div>
      </div>

      <!-- 余额信息 -->
      <div class="balance-info-section">
        <h3>账户信息</h3>
        <div class="info-item">
          <span class="label">账户余额：</span>
          <span class="value balance">¥{{ userBalance?.toFixed(2) }}</span>
        </div>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-method-section">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="selectedPaymentMethod" @change="onPaymentMethodChange">
          <el-radio-button label="BALANCE" :disabled="!canUseBalance">
            <i class="el-icon-wallet"></i> 余额支付
          </el-radio-button>
          <el-radio-button label="ALIPAY">
            <i class="el-icon-link"></i> 支付宝
          </el-radio-button>
        </el-radio-group>
        <div v-if="!canUseBalance && selectedPaymentMethod === 'BALANCE'" class="balance-warning">
          余额不足，请选择其他支付方式或进行充值
        </div>
      </div>

      <!-- 支付区域 -->
      <div class="payment-section">
        <!-- 余额支付 -->
        <div v-if="selectedPaymentMethod === 'BALANCE'" class="balance-payment">
          <div class="payment-confirm">
            <el-alert
              title="余额支付确认"
              :description="`确认使用余额支付 ¥${orderInfo.amount?.toFixed(2)}？`"
              type="info"
              show-icon
              :closable="false"
            />
            <div class="payment-actions">
              <el-button 
                type="primary" 
                size="large"
                @click="handleBalancePayment" 
                :loading="processingPayment"
                :disabled="!canUseBalance"
              >
                确认支付
              </el-button>
            </div>
          </div>
        </div>

        <!-- 支付宝支付 -->
        <div v-if="selectedPaymentMethod === 'ALIPAY'" class="alipay-payment">
          <div class="qr-code-container">
            <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="支付宝支付二维码" class="qr-code" />
            <div v-else-if="processingPayment" class="loading-qr">
              <el-icon class="is-loading"><Loading /></el-icon>
              <span>生成支付二维码中...</span>
            </div>
            <div v-else class="qr-placeholder">
              <el-icon><QRCode /></el-icon>
              <span>请点击下方按钮生成支付二维码</span>
            </div>
          </div>
          <div class="payment-actions">
            <el-button 
              type="primary" 
              size="large"
              @click="generateAlipayQrCode" 
              :loading="processingPayment"
            >
              {{ qrCodeUrl ? '刷新二维码' : '生成二维码' }}
            </el-button>
          </div>
          <div v-if="qrCodeUrl" class="payment-tip">
            <el-alert
              title="请使用手机支付宝扫码支付"
              type="success"
              show-icon
              :closable="